<template>
  <div>
    <a-modal :visible="schoolModalVisible" :width="650" @cancel="schoolModalCancel" :bodyStyle="{ padding: '10px' }">
      <h4 class="select_school">请选择学校</h4>
      <div id="school_big_box">
        <div class="school_fuzzy_search">
          <div class="ul_box">
            <div class="li_box" v-for="item in title_tab" :key="item.id" @click="title_tab_togg_fn(item)" :style="{ color: title_tab_value === item.id ? '#ff7e1e' : '' }">{{ item.name }}</div>
          </div>
          <a-auto-complete @select="onSelect" @search="handleSearch" style="width:100%" placeholder="搜索学校" v-model="select_school_value" :disabled="!disabledInput">
            <template slot="dataSource">
                <a-select-option v-for="item in dataSource" :key="item.id">{{ item.name }}</a-select-option>
            </template>
          </a-auto-complete>
        </div>

        <div class="school_city">
          <div v-for="item in city_province" :key="item.id" class="school_city_item" @click="city_province_togg_fn(item)"
                :style="{ color: select_city.id === item.id ? '#ff7e1e' : '' }">{{ item.name }}</div>
        </div>

        <div class="school_names_box">
          <div class="school_names">
            <div class="ulBox">
              <div class="li_list" v-for="item in all_school" @click="all_school_togg_fn(item)" :key="item.id" :style="{ color: select_school.id === item.id ? '#ff7e1e' : '' }">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div style="margin-top: 10px;height:40px;line-height: 40px;">
          <a-row>
            <a-col :span="18"><a-input placeholder="已选择学校" v-model="import_school_value" @change="changeSchool" :disabled="disabledInput" /></a-col>
            <a-col :span="6"><a class="fr" style="cursor:pointer;text-decoration: underline;" @click="changeSchoolOk">手动输入</a></a-col>
          </a-row>
        </div>
      </div>
      <div slot="footer">
        <a-button type="primary" @click="schoolModalOk">确认</a-button>
        <a-button @click="schoolModalCancel">取消</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import SCHOOL_LIST from '@/util/school'
export default {
  props: {
    schoolModalVisible: {
      type: Boolean,
      default: false
    }
  },
  filters: { ...SCHOOL_LIST },
  data () {
    return {
      title_tab: [],
      title_tab_value: 1,
      city_tab_value: 1100,
      city_province: [],
      all_school: [],
      select_city: { name: '北京市', id: 1100 },
      select_school: {},
      allDataSource: [],
      dataSource: [],
      select_school_value: '',
      import_school_value: '',
      disabledInput: true
    }
  },
  watch: {
    schoolModalVisible: {
      handler (newVal) {
        if (newVal) {
          this.allDataSource = []
          var arr = []
          SCHOOL_LIST.forEach(function (ele) {
            if (ele.schools && ele.schools.length > 0) {
              arr.push(ele.schools)
            }
          })
          var brr = arr.reduce(function (a, b) { return a.concat(b) })
          this.allDataSource = brr
          this.select_city = { name: '北京市', id: 1100 }
          this.city_tab_value = 1100
          this.title_tab_value = 1
          this.select_school = {}
          this.select_school_value = ''
          this.import_school_value = ''
          this.disabledInput = true
          this.initSchool()
        }
      }
    }
  },
  methods: {
    initSchool () { // 处理数据
      this.title_tab = []
      this.city_province = []
      this.all_school = []
      SCHOOL_LIST.forEach(ele => {
        if (ele.pid === 0) { // 取tab
          this.title_tab.push(ele)
        }
        if (ele.schools.length > 0) {
          if (this.title_tab_value === ele.pid) { // 取省份
            this.city_province.push({
              name: ele.name,
              id: ele.id
            })
          }
          if (this.city_tab_value === ele.id) { // 取学校
            this.all_school = ele.schools
          }
        }
      })
    },
    schoolModalCancel () {
      this.select_school = {}
      this.$emit('closeSchoolModal')
    },
    schoolModalOk () {
      if (this.disabledInput) {
        if (this.select_school.name) {
          this.setFieldValue()
        } else {
          this.$message.warning('请选择学校')
        }
      } else {
        if (this.import_school_value) {
          this.setFieldValue()
        } else {
          this.$message.warning('请输入学校')
        }
      }
    },
    title_tab_togg_fn (item) {
      this.title_tab_value = item.id
      this.select_school = {}
      this.select_school_value = ''
      if (item.id === 1) { // 国内
        this.city_tab_value = 1100
        this.select_city = { name: '北京市', id: 1100 }
      } else { // 国外
        this.city_tab_value = 2
        this.select_city = { name: '国外', id: 2 }
      }
      this.initSchool()
    },
    city_province_togg_fn (item) {
      if (!this.disabledInput) {
        return false
      }
      this.select_school = {}
      this.select_school_value = ''
      this.select_city = item
      this.city_tab_value = item.id
      this.initSchool()
    },
    all_school_togg_fn (item) {
      if (!this.disabledInput) {
        return false
      }
      this.dataSource = []
      this.select_school_value = item.name
      this.import_school_value = item.name
      this.select_school = item
    },
    onSelect (item) {
      for (var i = 0; i < this.allDataSource.length; i++) {
        if (this.allDataSource[i].id === item * 1) {
          this.select_school = { name: this.allDataSource[i].name, id: this.allDataSource[i].id }
          this.import_school_value = this.allDataSource[i].name
          break
        }
      }
    },
    handleSearch (item) {
      this.import_school_value = item
      var arr = []
      this.dataSource = []
      if (item) {
        this.allDataSource.filter(function (ele) {
          if (ele.name && ele.name.indexOf(item) !== -1) {
            arr.push({
              name: ele.name,
              id: ele.id + ''
            })
          }
        })
      }
      this.dataSource = arr
    },
    setFieldValue () {
      if (this.disabledInput) {
        this.$emit('changeTheSchool', this.select_school.name)
      } else {
        this.$emit('changeTheSchool', this.import_school_value)
      }
    },
    changeSchool (e) {
      this.import_school_value = e.target.value
    },
    changeSchoolOk () {
      this.disabledInput = !this.disabledInput
      if (!this.disabledInput) {
        this.select_school_value = ''
        this.select_school = {}
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.select_school
  text-align center
  font-size 18px
  margin-bottom 10px
#school_big_box
  background #f1f1f1
  margin 0 auto
  font-size 15px
  padding 10px
.school_fuzzy_search
  width 100%
.school_fuzzy_search .ul_box
  display flex
  justify-content space-between
  margin-bottom 10px
.school_fuzzy_search .ul_box .li_box
  cursor pointer
  text-decoration underline
.school_city
  width 100%
  height auto
  margin 10px 0px
  background #fff
  border solid 1px #b7b7b7
  border-radius 5px
  padding 5px
  max-height 200px
  overflow auto
.school_city .school_city_item
  display inline-block
  padding 0 10px
  cursor pointer
.school_city .school_city_item:hover
  text-decoration underline
  color #ff7e1e
.school_names_box
  width 100%
  background #fff
  border solid 1px #b7b7b7
  border-radius 5px
  padding 5px
.school_names
  width 100%
  height 270px
  overflow auto
.school_names .ulBox .li_list
  display inline-block
  min-width 50%
  padding-left 10px
  cursor pointer
.school_names .ulBox .li_list:hover
  text-decoration underline
  color #ff7e1e
.add_school
  width 100%
  border-top solid 1px #ccc
  margin-top 20px
  padding-top 30px
  margin-bottom 15px
.add
  width 90%
  margin-left 5%
.add .add_input
  width 83%
.ant-select-selection__rendered:after
  content none
</style>
